<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>请假申请</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">
		<link rel="stylesheet" href="/wechat/css/vue-select.css">

		<style scoped>
			.leave-request {
				min-height: 100vh;
				background-color: #f7f8fa;
				padding-bottom: calc(50px + env(safe-area-inset-bottom));
			}

			.form-container {
				/* padding-top: 46px; */
			}

			.gradient-header {
				background-image: linear-gradient(to bottom, #ffd60a, #ffb302);
				padding: 20px 16px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
			}

			.form-item {
				margin-bottom: 16px;
			}

			.form-item label {
				display: block;
				color: #333;
				margin-bottom: 8px;
				font-size: 16px;
			}

			.time-section {
				padding: 16px;
			}

			:deep(.van-field) {
				background-color: #fff;
				border-radius: 8px;
			}

			.field-icon {
				color: #ffd60a;
				font-size: 20px;
			}

			.reason-input {
				margin-top: 8px;
			}

			.submit-btn {
				position: fixed;
				bottom: calc(50px + env(safe-area-inset-bottom));
				left: 0;
				right: 0;
				padding: 16px;
			}

			:deep(.van-button--primary) {
				background: linear-gradient(to right, #ffd60a, #ffb302);
				border: none;
			}

			/* 底部导航样式 */
			.tab-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
			}

			.tab-item .van-icon {
				margin-bottom: 4px;
			}

			/* 暗黑模式支持 */
			@media (prefers-color-scheme: dark) {
				.leave-request {
					background-color: #1c1c1e;
				}

				.form-item label {
					color: #fff;
				}

				:deep(.van-field) {
					background-color: #2c2c2e;
					color: #fff;
				}
			}

			/* iPhone X 及以上机型底部安全区域适配 */
			@supports (padding-bottom: env(safe-area-inset-bottom)) {
				.leave-request {
					padding-bottom: calc(50px + env(safe-area-inset-bottom));
				}

				.submit-btn {
					bottom: calc(50px + env(safe-area-inset-bottom));
				}

				.van-tabbar {
					padding-bottom: env(safe-area-inset-bottom);
				}
			}
			
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
			}
			.v-select {
				border: none;
				div {
					border: none;
				}
			}
		</style>

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/wechat/js/vant.min.js"></script>
		<script src="/wechat/js/vue-select.umd.min.js"></script>

<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/scriptZIP/dayjs.min.js"></script>
		<!-- <script src="/js/common.js"></script> -->
	</head>

	<body>

			<div class="leave-request" id="app">
				<div class="backtn-div">
					<van-icon name="arrow-left" @click="goBack" />
				</div>

				<!-- 表单区域 -->
				<div class="form-container">
					<!-- 顶部渐变背景 -->
					<div class="gradient-header">
						<!-- 学员姓名 -->
						<div class="form-item">
							<label>学员姓名</label>
							<van-field v-model="formData.studentName" placeholder="请选择学员姓名" readonly is-link
								@click="showStudentPicker = true" />
						</div>

						<!-- 选择课程 -->
						<div class="form-item">
							<label>选择课程</label>
							<div style="height: 32px; line-height: 32px; background-color: #fff; padding: 8px;">
								<v-select v-if="selectShow" multiple placeholder="请选择课程" v-validate="'required'" :options="courseColumns" label="text" :reduce="item=>item.value"
								v-model="formData.courseIds"></v-select>
							</div>
<!-- 							<van-field v-model="formData.courseNames" placeholder="请选择课程" readonly is-link
								@click="formData.studentId ? showCoursePicker = true : ''" /> -->
						</div>
					</div>

					<!-- 时间选择区域 -->
					<div class="time-section">
						<!-- 申请时间 -->
						<div class="form-item">
							<label>申请时间</label>
							<van-field v-model="formData.applicationTimeName" readonly is-link
								@click="showApplyTimePicker = true">
								<template #left-icon>
									<van-icon name="calendar-o" class="field-icon" />
								</template>
							</van-field>
						</div>

						<!-- 开始时间 -->
						<div class="form-item">
							<label>开始时间</label>
							<van-field v-model="formData.startTimeName" readonly is-link
								@click="showStartTimePicker = true">
								<template #left-icon>
									<van-icon name="calendar-o" class="field-icon" />
								</template>
							</van-field>
						</div>

						<!-- 结束时间 -->
						<div class="form-item">
							<label>结束时间</label>
							<van-field v-model="formData.endTimeName" readonly is-link @click="showEndTimePicker = true">
								<template #left-icon>
									<van-icon name="calendar-o" class="field-icon" />
								</template>
							</van-field>
						</div>

						<!-- 请假理由 -->
						<div class="form-item">
							<label>请假理由</label>
							<van-field v-model="formData.reason" type="textarea" rows="4" placeholder="请填写请假原因......"
								class="reason-input" />
						</div>
					</div>
				</div>

				<!-- 提交按钮 -->
				<div class="submit-btn">
					<van-button round block type="primary" @click="submitRequest">
						提交申请
					</van-button>
				</div>


				<!-- 选择器弹出层 -->
				<van-popup v-model:show="showStudentPicker" position="bottom">
					<van-picker :columns="studentColumns" @confirm="onStudentConfirm"
						@cancel="showStudentPicker = false" show-toolbar title="选择学员" />
				</van-popup>

				<van-popup v-model:show="showCoursePicker" position="bottom">
					<van-picker :columns="courseColumns" @confirm="onCourseConfirm" @cancel="showCoursePicker = false"
						show-toolbar title="选择课程" />
				</van-popup>

				<van-popup v-model:show="showApplyTimePicker" position="bottom">
					<van-date-picker  v-model="currentDate" @confirm="onApplyTimeConfirm"
						@cancel="showApplyTimePicker = false" title="选择申请时间" />
				</van-popup>

				<van-popup v-model:show="showStartTimePicker" position="bottom">
					<van-date-picker  v-model="currentDate" @confirm="onStartTimeConfirm"
						@cancel="showStartTimePicker = false" title="选择开始时间" />
				</van-popup>

				<van-popup v-model:show="showEndTimePicker" position="bottom">
					<van-date-picker  v-model="currentDate" @confirm="onEndTimeConfirm"
						@cancel="showEndTimePicker = false" title="选择结束时间" />
				</van-popup>
			</div>





		<script>
			// 初始化 Vue 实例
			const app = Vue.createApp({
				components: {
					vSelect: window["vue-select"]
				},
				data() {
					return {
						formData: {
						  // studentName: '',
						  // courseName: '',
						  // studentName: '',
						  // courseName: '',
						  // applyTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
						  // startTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
						  // endTime: dayjs().add(2, 'month').format('YYYY/MM/DD HH:mm:ss'),
						  // reason: '',
						  "studentId": '',
						  "typeOfLeave": 0, //请假0 停课1
						  "applicantId": '', //教师id
						  "courseIds": [], //课程id数组 
						  "courseNames": [],
						  "applicationTime": "", //申请时间
						  "startTime": "", //开始时间
						  "endTime": "", //结束时间
						  "reason": "" //理由
						},
						showStudentPicker: false,
						showCoursePicker: false,
						showApplyTimePicker: false,
						showStartTimePicker: false,
						showEndTimePicker: false,
						schoolId: '',
						selectShow: false,
						agentId: '',
						currentDate: ['2021', '01', '01'],
						studentColumns: [],
						courseColumns: [],
						courseNames: [],
						teacherOjb: {}
					};
				},
				created: function() {
					this.schoolId = localStorage.getItem('schoolId');
					this.agentId = localStorage.getItem('agentId');
					this.teacherOjb = this.getTeacher();
					this.formData.applicantId = this.teacherOjb.id
					this.getStudent()
					// this.getList()

				},
				methods: {
					onAddClick() {
						this.goUrl('addStudent.html')
					},
					goUrl(url) {
						window.location = url
					},
					goBack() {
						history.back();
					},
					getTeacher() {
						var s = sessionStorage["hxt-teacher"];
						return s ? JSON.parse(s) : null;
					},
					getStudent() {
						axios.get('/t/student/all1/' + this.schoolId).then(function(res) {
							res.data.forEach((item, index) => {
								this.studentColumns.push({
									'text': item.name,
									'value': item.id
								})
							});
						}.bind(this));
					},
					getCourse() {
						axios.get('/t/student/all2/' + this.formData.studentId).then(function(res) {
							this.selectShow = true
							res.data.forEach((item, index) => {
								this.courseColumns.push({
									'text': item.name,
									'value': item.id
								})
							});
					
						}.bind(this));
					},
					// 选择器确认事件
					onStudentConfirm({
						selectedValues,
						selectedOptions
					}) {
					  this.formData.studentId = selectedOptions[0]?.value;
					  this.formData.studentName = selectedOptions[0]?.text;
					  this.formData.courseNames = ''
					  this.getCourse()
					  this.showStudentPicker = false
					},
					
					 onCourseConfirm({
						selectedValues,
						selectedOptions
					}) {
					  this.formData.courseIds.push(selectedOptions[0]?.value);
					  this.courseNames.push(selectedOptions[0]?.text)
					  this.formData.courseNames = this.courseNames.join(',');
					  this.showCoursePicker = false
					},
					
					 onApplyTimeConfirm({
						selectedValues,
						selectedOptions
					}) {
					  this.formData.applicationTime = dayjs(selectedValues.join('-')).format('YYYY-MM-DD HH:mm:ss')
					  this.formData.applicationTimeName = selectedValues.join('-')
					  this.showApplyTimePicker = false
					},
					
					onStartTimeConfirm({
						selectedValues,
						selectedOptions
					}) {
					  this.formData.startTime = dayjs(selectedValues.join('-')).format('YYYY-MM-DD HH:mm:ss')
					  this.formData.startTimeName = selectedValues.join('-')
					  this.showStartTimePicker = false
					},
					
					onEndTimeConfirm({
						selectedValues,
						selectedOptions
					}) {
					  this.formData.endTime = dayjs(selectedValues.join('-')).format('YYYY-MM-DD HH:mm:ss')
					  this.formData.endTimeName = selectedValues.join('-')
					  this.showEndTimePicker = false
					},
	
					// 提交申请
					submitRequest() {
					  if (!this.formData.studentId) {
					    alert('请选择学员')
					    return
					  }
					  if (this.formData.courseIds.length == 0) {
					    alert('请选择课程')
					    return
					  }
					  if (!this.formData.applicationTime) {
					    alert('请选择申请时间')
					    return
					  }
					  if (!this.formData.startTime) {
					    alert('请选择开始时间')
					    return
					  }
					  if (!this.formData.endTime) {
					    alert('请选择结束时间')
					    return
					  }
					  if (!this.formData.reason) {
					    alert('请填写请假理由')
					    return
					  }
					  
					  
					  axios.post('/t/leave/add1', this.formData).then(function(res) {
						  this.goUrl('leaveApplication.html')
					  }.bind(this));
					  
					  // console.log('提交数据:', this.formData)
					}

				},
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>